<!DOCTYPE html>
<html lang="en">

<head>
<script src="//weixiao.qq.com/js/MTAH5/stats.js" id="WXH5" sid="500622700"></script>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="/smallQuestion/css/mainBack/index-back.css">
    <link rel="stylesheet" type="text/css" href="/smallQuestion/css/question_btn.css">
    <title>魔镜魔镜</title>
    <style>
    [v-cloak] {
    	display: none;
    }
    </style>
</head>

<body >
    <!--主体-->
    <div class="container" id="body" v-cloak >
        <!--main-->
        <div class="main">
            <!--搜索-->
            <div class="operations">
                <a href="javascript:;" class="btn01" @click="addProduct()">添加新题目</a>
<!--                 <div class="fr">
                    <input type="text" placeholder="请输入应用名称查询" id="productName" @keyup.enter="loadData(0)"/>
                    <a href="javascript:;" class="btn01 w-60 f-w-n" @click="loadData(0)">查询</a>
                </div> -->
            </div>
            <!--表头-->
            <div class="flowyun-top">
                <ul class="ov-hi">
                    <li>logo</li>
                    <li>标题</li>
                    <li>分享展示标题</li>
                    <li>关注跳转地址</li>
                    <li>更新时间</li>
                    <li>状态</li>
                    <li>操作</li>
                </ul>
            </div>
            <!--表身-->
            <div class="flowyun-table">
            <div style="text-align:center;" class="searchShow">暂无数据</div>
                <table>
                    <tbody>
                        <tr v-for="(t,index) in titles" style="border-bottom: 2px solid #FFCCFF;border-bottom-style:dashed">
                            <td v-bind:title="t.tLogo"><img v-bind:src="t.tLogo" width=50px height=50px/></td>
                            <td v-bind:title="t.tName">{{t.tName}}</td>
                            <td v-bind:title="t.shareTitle">{{t.shareTitle}}</td>
                            <td v-bind:title="t.shareUrl">{{t.shareUrl}}</td>
                            <td v-bind:title="t.gmtUpdate | time">{{t.gmtUpdate | time}}</td>
                            <td v-if="t.tStatus==0">
                                <span class="running">运行中</span>
                            </td>
                            <td v-if="t.tStatus==0">
                                <a href="javascript:;" class="btn-two red mini" @click="updateStatus('stop',t)">下线</a>
                            </td>
                            <td v-if="t.tStatus==1">
                                <span class="stoped">已下线</span>
                            </td>
                            <td v-if="t.tStatus==1">
                                <a href="javascript:;" class="btn-two purple mini" @click="modifyProduct(t)">修改</a><br/>
                                <a :href="'/smallQuestion/back/product?titleId=' + t.id " class="modify btn-two yellow mini">修改/添加(选项)</a><br/>
                                <a href="javascript:;" class="btn-two green mini" @click="updateStatus('running',t)">上线</a><br/>                  
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
            <div class="pagebox">
                <div class="pagination"></div>
                <p class="totalpage"></p>
            </div>
            

        </div>
            <div>
            	<div>大家可以关注公众号进行本功能或其他功能体验，或者加qq群一起交流公众号运营:<p>253711968</p></div>
            	<div><img src="/smallQuestion/images/qrcode.jpg" style="width:250px;height:250px"></div>
            	<div>目前微信公众号的数量上千万，小公号与大公号抗衡唯有抱团取暖，各自为营只能成为炮灰，欢迎大家一起结盟,共同发展！</div>
            
            </div>
        
    
    <!-- 添加新应用 -->
    <div class="app-box add-box hide">
        <dl>
            <dt style="width:99px">封面<span style="color:red;">*</span>：</dt>
            <dd class="error-msg">
                <div class="add-box-right app-icon-box">
                    <img id="addImg" class="app-icon" src="" alt="">
                    <div class="ml-10 v-a-t">
                        <p class="icon-demand">建议尺寸：500px x 300px
                            <br>图片大小：10MB以内</p>
                        	<em class="error" id="errorPicture"></em>
                        <div class="file-box">
                            <input type="file" id="addImgUpload"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                            <a href="" class="btn01" >上传</a>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
        <dl>
            <dt style="width:99px">标题<span style="color:red;">*</span>：</dt>
            <dd class="error-msg">
                <div>
                    <em class="error" id="errorId"></em>
                    <input type="text" id="addTitleName" name="addTitleName">
                </div>

            </dd>
        </dl>
              <dl>
            <dt style="width:99px">分享展示标题：</dt>
            <dd class="error-msg">
                <div>
                    <em class="error" id="errorShareTitle"></em>
                    <input type="text" value="" id="addShareTitle" name="addShareTitle" placeholder="疑问加群：253711968">
                </div>
            </dd>
        </dl>
        <dl>
            <dt style="width:99px">关注跳转url：</dt>
            <dd class="error-msg">
                <div>
                    <em class="error" id="errorShareUrl"></em>
                    <input type="text" value="" id="addShareUrl" name="addShareUrl" placeholder="疑问加群：253711968">
                </div>
            </dd>
        </dl>
<!--         <dl> -->
<!--           <dt></dt> -->
<!--           <dd> -->
<!--           <a href="javascript:void(0)" @click="add()">新增选项</a> -->
<!-- 			    <div v-for="(name,index) in form.names"> -->
<!-- 			        <input v-model="name.text" type="text" name="names[]"><a href="javascript:void(0)" @click="deleteInput(index)">刪除</a> -->
<!-- 			    </div> -->
<!-- 			    </dd> -->
<!--         </dl> -->
    </div>
    <!-- 添加新应用 over -->
    <!-- 修改应用 -->
    <div class="app-box modify-box hide">
        <dl>
            <dt style="width:99px">封面<span style="color:red;">*</span>：</dt>
            <dd class="error-msg">
                <div class="add-box-right app-icon-box">
                    <img id="editImg" class="app-icon" src="/smallQuestion/images/Icon-96.png" alt="">
                    <div class="ml-10 v-a-t">
                        <p class="icon-demand">建议尺寸：500px x 300px
                            <br>图片大小：10MB以内</p>
                        	<em class="error" id="editErrorPicture"></em>
                        <div class="file-box">
                            <input type="file" id="editImgUpload"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                            <a href="" class="btn01">上传</a>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
        <dl>
            <dt style="width:99px">标题<span style="color:red;">*</span>：</dt>
            <dd class="error-msg">
                <div>
                    <em class="error" id="editErrorName"></em>
                    <input type="text" value="" id="editProductName" name="editProductName">
                </div>
            </dd>
        </dl>
        <dl>
            <dt style="width:99px">分享展示标题：</dt>
            <dd class="error-msg">
                <div>
                    <em class="error" id="editErrorShareTitle"></em>
                    <input type="text" value="" id="editShareTitle" name="editShareTitle">
                </div>
            </dd>
        </dl>
        <dl>
            <dt style="width:99px">关注跳转url：</dt>
            <dd class="error-msg">
                <div>
                    <em class="error" id="editErrorShareUrl"></em>
                    <input type="text" value="" id="editShareUrl" name="editShareUrl">
                </div>
            </dd>
        </dl>
    </div>
    <!-- 修改应用 over -->
</div>

    <!--js-->
    <script src="/smallQuestion/js/vue.js"></script>
    <script src="/smallQuestion/js/date.js"></script>
    <script src="/smallQuestion/js/libs/jquery-1.11.3.min.js"></script>
    <script src="/smallQuestion/js/plugins/pagination/jquery.pagination.js"></script>
    <script src="/smallQuestion/js/plugins/layer/layer.js"></script>
    <script>
        $(function() {
            var status = 1;
        	//清空表单数据
        	function clearFrom(){
        		$("#addProductId").val("");
            	$("#addProductName").val("");
            	$("#addTargetAddress").val("");
            	$("#addProductInfo").val("");
            	$("#addImg").attr("src","");
            	$("#addStatus").val("1");
            	
            	//清空警告信息
            	$("#errorPicture").text("");
            	$("#errorName").text("");
            	$("#errorUrl").text("");
            	$("#errorIntroduce").text("");
            	$("#errorId").text("");
            	
            	$("#editErrorPicture").text("");
            	$("#editErrorName").text("");
            	$("#editErrorUrl").text("");
            	$("#editErrorIntroduce").text("");
        	}
        	
        	function uploadImg(tabId,tabType){
        		var fileM=document.querySelector(tabId);
             	 $(tabId).on("change",function(){
             	  console.log(fileM.files);
             	  //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
             	  var fileObj=fileM.files[0];
             	  //创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。
             	  var formData=new FormData();
             	  formData.append('file',fileObj);
             	  
             	  
             	 $.ajax({  
                   url:'/smallQuestion/api/file/uploadFile',  
                   type:'POST',  
                   data:formData,  
                   async: false,    
                   cache: false,   
                   contentType: false, //不设置内容类型  
                   processData: false, //不处理数据  
                   success:function(data){  
                       console.log(data);  
                       if(tabType == 'add'){
                      	 $("#addImg").attr("src","/smallQuestion/api/file/"+data);
//                       	 checkImg(fileObj);
                       }
                       if(tabType == 'edit'){
                      	 $("#editImg").attr("src","/smallQuestion/api/file/"+data);
//                       	 checkImg(fileObj);
                       }
                       
                   },  
                   error:function(){  
                       alert("上传失败！");  
                   }  
               }) 
             	 })
        	}
        	//时间戳格式化为yyyy-MM-dd hh:mm:ss
            Vue.filter('time', function (value) {
                return new Date(value).Format("yyyy-MM-dd hh:mm:ss").toLocaleString();
            })
            
        	 var productVue = new Vue({
     			el: "#body",
     			data: {
     			 titles:[],
    		        form: {
    		            names: [{
    		                text: "111"
    		            }]
    		        }
     			},
     			methods: {
    		        add:function() {
    		            this.form.names.push({
    		                text: ""
    		            })
    		        },
    		        deleteInput:function(index) {
    		        	this.form.names.splice(index,1)
    		        },
     				 //从服务器读取数据
                    loadData: function(pageNum){ 
                        //初始化查询商品
                        $.getJSON("/smallQuestion/api/getTitleList?page="+pageNum+"&size=5&mediaKey=${mediaId}", function(result){
                     	   if(result.content.length > 0){
                     		  $(".pagination").show();
                           	  $(".searchShow").hide();
                     	   		productVue.titles = result.content;
                     	   		$(".totalpage").html("共"+result.totalPages+"页");
                           	  //分页
                                $(".pagination").pagination(result.totalElements, {
                                    items_per_page: 5,
                                    num_display_entries: 4, //显示页数数字控制为5个,此处请保留为4
                                    current_page: pageNum,
                                    num_edge_entries: 1,
                                    callback: pageselectCallback
                                });
                         
                     	   }else{
                     		  	productVue.titles = {};
                     		 	$(".totalpage").html("");
                     		 	$(".pagination").hide();
                     			$(".searchShow").show();
                     	   }

                        });
                    },
                    //修改
                    modifyProduct: function(product) {
                      layer.open({
                        type: 1,
                        title: '修改题目',
                        id: 'modifyApp',
                        skin: 'flowyun-skin',
                        area: ['552px', '520px'],
                        content: $('.modify-box'),
                        btn: ['确定'],
                        success: function (layero, index) {
                        	//图片触发标志
                        	clearFrom();
                        	tabType = "edit";
                        	uploadImg("#editImgUpload","edit");
                        	$("#editProductName").val(product.tName);
                        	$("#editShareUrl").val(product.shareUrl);
                        	$("#editShareTitle").val(product.shareTitle);
//                         	$("#editProductInfo").val(product.productInfo);
                        	$(".app-icon").attr("src",product.tLogo);
                        	/* if(product.status == 0){
                        		$('.switch').removeClass('switch-no').next().text('当前应用为运行状态')
                        	}
                        	if(product.status == 1){
                        		$('.switch').addClass('switch-no').next().text('当前应用为停止状态')
                        	}
                            layero.find('.switch').click(function () {
                                if (!$(this).hasClass('switch-no')) {
                                    $(this).addClass('switch-no').next().text('当前应用为停止状态');
                                    //product.status = 1;
                                    status = 1;
                                } else {
                                    $(this).removeClass('switch-no').next().text('当前应用为运行状态');
                                    //product.status = 0;
                                    status = 0;
                                }
                            }) */
                        },
                        end: function(){
//                             $(".switch").off("click");
                        }, 
                        btn1: function (index) {
                        	var productName = $("#editProductName").val();
                        	var shareUrl = $("#editShareUrl").val();
                        	var shareTitle = $("#editShareTitle").val();
                        	var logo = $("#editImg").attr("src");
                        	
                        	//提交前验证表单数据
                        	if(logo.replace(/(^\s*)|(\s*$)/g, "").length ==0){
                        		$("#editErrorPicture").text("请上传图片！");
                        		return;
                        	}
                        	if(productName.replace(/(^\s*)|(\s*$)/g, "").length ==0){
                        		$("#editErrorName").text("应用名称不能为空！");
                        		return;
                        	}
                        	if(shareUrl != ""){
                        		if(!checkUrl(shareUrl)){
                      			   $("#editErrorShareUrl").text("关注跳转url不合法！");
                           			return;
                      		   	}else{
                      			   $("#editErrorShareUrl").text("");
                      		   	}
                        	}
                        	
                        	if(productName.length >40){
                        		$("#editErrorName").text("应用名称长度限制为40个字符！");
                        		return;
                        	} 
                        	
                        	var myreg = /[@#\$%\^&\*]+/g; 
                        	var emoji = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;
                        	if(myreg.test(productName) || emoji.test(productName)){
                        		$("#editErrorName").text("应用名称包含非法字符！");
                        		return;
                        	}
						
                        	product.tName = productName;
                        	product.shareUrl = shareUrl;
                        	product.shareTitle = shareTitle;
                        	product.tLogo = logo;
                        	product.tStatus = 1;
                        	product.mediaKey = "${mediaId}";
                        	
                        	 $.ajax({
    					                type: "POST",
    					                data:JSON.stringify(product),
    					                contentType: "application/json",
    					                url: "/smallQuestion/api/saveTitle",
    					                success: function (result) {
    					                	alert("修改成功");
    					                	productVue.loadData(0);
    					                },
    					                error: function (XMLHttpRequest, textStatus, errorThrown) {
    					                    console.log("shibai");
//     					                    alert(XMLHttpRequest.status);
//     					                    alert(XMLHttpRequest.readyState);
    					                    alert(textStatus);
    					                }
    					            });
//                             $(".switch").off("click")
                            layer.close(index)
                        }
                    });
                    },
					addProduct: function() {
						//先清空表单数据
						clearFrom();
			            layer.open({
			                type: 1,
			                id: 'addApp',
			                title: '添加新题目',
			                skin: 'flowyun-skin',
			                area: ['552px', '520px'],
			                content: $('.add-box'),
			                btn: ['确定'],
			                success: function (layero, index) {
			                	//图片触发标志
			                	tabType = "add";
			                	uploadImg("#addImgUpload","add");
			                },
			                end: function(){
			                }, 
			                btn1: function (index) {
			                	var product= {};
			                	var userIdExist;
                            	product.tName = $("#addTitleName").val();
                            	product.tLogo = $("#addImg").attr("src");
                            	product.shareUrl = $("#addShareUrl").val();
                            	product.shareTitle = $("#addShareTitle").val();
                            	product.mediaKey = "${mediaId}";
                            	product.tStatus = 1;
                            	//提交前验证表单数据
                            	if(product.tLogo.replace(/(^\s*)|(\s*$)/g, "").length ==0){
                            		$("#errorPicture").text("请上传图片！");
                            		return;
                            	}
                            	if(product.tName.replace(/(^\s*)|(\s*$)/g, "").length ==0){
                            		$("#errorName").text("题目不能为空！");
                            		return;
                            	}
                            	
                            	if(product.tName.length > 40){
                            		$("#errorName").text("题目长度限制为30个字符！");
                            		return;
                            	}
                            	var myreg=/[@#\$%\^&\*]+/g;
                            	var emoji = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;
                            	if(myreg.test(product.tName) || emoji.test(product.tName)){
                            		$("#errorName").text("应用名称包含非法字符！");
                            		return;
                            	}
                            	if(product.shareUrl != ""){
                            		if(!checkUrl(product.shareUrl)){
                          			   $("#errorShareUrl").text("关注跳转url不合法！");
                               			return;
                          		   	}else{
                          			   $("#errorShareUrl").text("");
                          		   	}
                            	}
					    	    $.ajax({
					                type: "POST",
					                data:JSON.stringify(product),
					                contentType: "application/json",
					                url: "/smallQuestion/api/saveTitle",
					                success: function (result) {
					                	alert("添加成功");
					                	productVue.loadData(0);
					                },
					                error: function (XMLHttpRequest, textStatus, errorThrown) {
					                    console.log("shibai");
// 					                    alert(XMLHttpRequest.status);
// 					                    alert(XMLHttpRequest.readyState);
					                    alert(textStatus);
					                }
					            });
			                    $(".switch").off("click")
			                    layer.close(index)
			                }
			            });
                    	
                    },
					updateStatus: function(status,product) {
						if(status == "stop"){
							product.tStatus = 1;
						    $.ajax({
				                type: "POST",
				                data:JSON.stringify(product),
				                contentType: "application/json",
				                url: "/smallQuestion/api/saveTitle",
				                success: function (result) {
				                  window.location.reload();
				                	console.log("状态修改成功");
				                },
				                error: function (XMLHttpRequest, textStatus, errorThrown) {
				                    console.log("shibai");
				                    alert(XMLHttpRequest.status);
				                    alert(XMLHttpRequest.readyState);
				                    alert(textStatus);
				                }
				            });
						}
						if(status == "running"){
							product.tStatus = 0;
							 layer.confirm('公众号管理者需对发布内容负责，禁止发布违规、不健康等内容！', 
			                 
			                 {
			                   btn: ['确认上线','暂不上线'] //按钮
			         
			                 }, 
			                 
			                 function(index){
			                   $.ajax({
						                type: "POST",
						                data:JSON.stringify(product),
						                contentType: "application/json",
						                url: "/smallQuestion/api/saveTitle",
						                success: function (result) {
						                  window.location.reload();
						                	console.log("状态修改成功");
						                },
						                error: function (XMLHttpRequest, textStatus, errorThrown) {
						                    console.log("shibai");
						                    alert(XMLHttpRequest.status);
						                    alert(XMLHttpRequest.readyState);
						                    alert(textStatus);
						                }
						            });
			                   return true;
			                 },
			                 function(index){
			                   layer.close(index);
			                     return false;
			                 }
			             );
						}
                    	
                    }
     			}
     		});
	   
	   $("#editProductName").change(function(){
		   var editProductName = $("#editProductName").val();
		   if(editProductName.replace(/(^\s*)|(\s*$)/g, "").length ==0){
       	   		$("#editErrorName").text("应用名称不能为空！");
       			return;
       	   }else{
       		$("#editErrorName").text("");
       	   }
       });
	   
       //初始化数据
       productVue.loadData(0);
       function pageselectCallback(page_index,jd){
    	   productVue.loadData(page_index,jd);
       }     

//检查图片像素和图片文件大小
 function checkImg(f){
	var reader = new FileReader();
	reader.onload = function (e) {
		var data = e.target.result;
	    //加载图片获取图片真实宽度和高度
	    var image = new Image();
	    image.onload=function(){
	    	var width = image.width;
	        var height = image.height;
	        //alert(width+'======'+height+"====="+f.size);
	        if(parseInt(f.size)>10485760){
	        	$("#errorPicture").text("图片不符合要求！");
	        	$("#editErrorPicture").text("图片不符合要求！");
	        	$("#addImg").attr("src","");
	        	$("#editImg").attr("src","");
	        }else{
	        	$("#errorPicture").text("");
	        	$("#editErrorPicture").text("");
	        }
	    };
	    image.src= data;
	};
	
	reader.readAsDataURL(f);
}
 function checkUrl(url){
 	var rule = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
;
 	return rule.test(url);
 }
 
        })     
    </script>
        <script src="/smallQuestion/js/views/product-management.js"></script>
</body>

</html>